<template>
  <div>
    <template>
      <account-card slot="btn" title="账号列表">
        <el-table :data="tableData" ref="accountTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column prop="account" label="账号"></el-table-column>

          <el-table-column prop="userGroup" label="用户组"></el-table-column>
          <el-table-column prop="ctime" label="创建时间"></el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>

              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
                @confirm="handleDelete(scope.row)"
              >
                <el-button size="mini" type="danger" class="delbtn" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="sizechange"
          @current-change="pagechange"
          :current-page="currentPages"
          :page-sizes="[1,3, 5, 10, 20]"
          :page-size="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <!-- 编辑弹出模态框 -->
        <el-dialog width="450px" title="账号修改" :visible.sync="dialogVisible">
          <el-form :model="editFormData">
            <el-form-item label="账号" :label-width="formLabelWidth">
              <el-input v-model="editFormData.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户组" :label-width="formLabelWidth">
              <el-select v-model="editFormData.userGroup" placeholder="请选择用户权限">
                <el-option label="普通管理员" value="普通管理员"></el-option>
                <el-option label="超级管理员" value="超级管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 批量按钮 -->
        <div class="btns">
          <el-button @click="batchDelete" type="danger" size="small">批量删除</el-button>
          <el-button @click="toggleSelection()" type="primary" size="small">取消选择</el-button>
        </div>
      </account-card>
    </template>
  </div>
</template>

<script>
import { userlist, userdel, userdelall, useredit } from "@/apis/users.js";
import AccountCard from "../../../components/accountcard/AccountCard.vue";
export default {
  components: {
    AccountCard,
  },
  data() {
    return {
      tableData: [],
      currentPages: 1, // 当前页
      pageSizes: 5, //每页条数
      total: 0, // 总数据条数
      dialogVisible: false, // 模态框显示或隐藏
      formLabelWidth: "120px",

      // 编辑表单数据
      editFormData: {
        account: "",
        userGroup: "",
      },
    };
  },
  methods: {
    reqtabledata() {
      userlist({
        currentPage: this.currentPages,
        pageSize: this.pageSizes,
      }).then((res) => {
        console.log(res.data);
        for (let obj of res.data.data) {
          let date = new Date(obj.ctime);
          obj.ctime =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    //取消选择
    toggleSelection() {
      this.$refs.accountTable.clearSelection();
    },
    //模态框回填
    handleEdit({ account, userGroup, id }) {
      this.dialogVisible = true;
      //回填
      this.editFormData.account = account;
      this.editFormData.userGroup = userGroup;
      this.editFormData.id = id;
    },
    //确认修改
    saveEdit() {
      useredit(this.editFormData)
        .then((res) => {
          if (res.data.code === 0) {
            this.dialogVisible = false;
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.reqtabledata();
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //每页条数
    sizechange(newsize) {
      console.log(newsize);
      this.pageSizes = newsize;
      this.reqtabledata();
    },
    // 当前页
    pagechange(newsize) {
      console.log(newsize);
      this.currentPages = newsize;
      this.reqtabledata();
    },
    //删除
    handleDelete(row) {
      userdel({ id: row.id }).then((res) => {
        console.log(res.data);
        if (res.data.code === 0) {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
          this.reqtabledata();
        }
      });
    },
    //批量删除
    batchDelete() {
      console.log(this.ids);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userdelall({ ids: JSON.stringify(this.ids) }).then((res) => {
            if (res.data.code === 0) {
              this.reqtabledata();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(rows) {
      this.ids = rows.map((v) => v.id);
    },
  },
  created() {
    this.reqtabledata();
  },
};
</script>

<style lang="less" scoped>
.delbtn{
  margin-left: 5px;
}
</style>